<template>
  <div :class="['page-vscode',{'has-menu': hasMenu}]" id="pageVsCodeEditor"></div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  props: ['options', 'hasMenu'],
  data () {
    return {
      vscodeEditor: null,
      defaultOptions: {
        value: 'console.log("Hello,AImind")',
        language: 'javascript',
        theme: 'vs-dark',
        autoIndent: true, // 自动缩进
        minimap: {
          enabled: false
        }, // 右侧不显示编辑器预览框
        scrollbar: {
          verticalScrollbarSize: 8
        }
      }
    };
  },
  methods: {
    // 设置值
    setValue (value) {
      this.vscodeEditor.setValue(value);
    },

    // 获取值
    getValue () {
      return this.vscodeEditor.getValue();
    },

    // 销毁
    dispose () {
      this.vscodeEditor.dispose();
    }
  },
  mounted () {
    let options = Object.assign({}, this.defaultOptions, this.options);
    this.vscodeEditor = monaco.editor.create(
      document.getElementById('pageVsCodeEditor'),
      options
    );
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-vscode {
  width: 100%;
  height: calc(100% - 40px);
  min-height: 250px;
  &.has-menu {
    width: calc(100% - 250px);
    float: left;
  }
}
</style>
